<template>
    <div>
        <h3>子组件页面</h3>

        <!-- <p>{{ props.name }}</p>
        <p>{{ props.data }}</p>
        <p>{{ props.data.age }} {{ props.data.sex }}</p> -->

        <!-- <button @click="handleClick('李四')">修改名字</button> -->
        <button @click="onClick('2206A')">修改名字</button>


        <div>=============================</div>
        <input type="text" v-model="newName">

        <!-- 引用孙子组件 -->
        <grandSon></grandSon>
    </div>
</template>

<script setup>
import { getCurrentInstance, inject, ref } from 'vue';

// 引入孙子页面
import grandSon from './grandSon.vue';

// 获取全局中的参数
const newName = inject('newName')

const method = () =>{
    name.value = '专高一'
}

// 方法二
const name = ref('')
defineExpose({
    name,
    method,
})

const onClick = (val) =>{
    name.value = val
}



// 方法一
// const { proxy } = getCurrentInstance()

// const handleClick = (name) =>{
//     proxy.$emit('updateName', name)
// }

// const props = defineProps({
//     name,
//     data: {
//         type: Object,
//         default: {}
//     }
// })


</script>